<template>
  <div class="acheckbox">
    <label class="el-checkbox"
      ><span
        @click="choose"
        :class="[
          'el-checkbox__input',
          { 'is-checked': this.$parent.value === this.label ? true : false },
        ]"
        ><span class="el-checkbox__inner" @click="choose"></span
        ><input
          type="checkbox"
          aria-hidden="false"
          class="el-checkbox__original"
          value="" /></span
      ><span class="el-checkbox__label">
        <slot></slot>
        <!----></span
      ></label
    >
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: [String, Number],
      default: "备选项",
    },
  },
  methods: {
    choose() {
      this.$parent.$emit("change", this.label);
    },
  },
  data() {
    return {
      checkbox: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #38c567;
  border-color: #409eff;
}
</style>
